// 1.1 获取裁剪区域的 DOM 元素
var $image = $('#image')

// 1.2 配置选项
const options = {
    // 纵横比
    aspectRatio: 1,
    // 指定预览区域
    preview: '.img-preview'
}

// 1.3 创建裁剪区域
$image.cropper(options);

// 点击上传 图片
$('button:contains("上传")').on('click', function () {
    $('#file').trigger('click');
});

// 把选中的图片和裁剪图片替换
$('#file').on('change', function () {
    if (this.files.length > 0) {
        // 先获取文件对象
        var fileObj = this.files[0];

        // 创建临时url
        var urls = URL.createObjectURL(fileObj);

        // $image.attr('src', urls);

        // 需要把创建裁剪区域删除然后在把图片添加，之后再重新创建
        $image.cropper('destroy').attr('src', urls).cropper(options);
    }


});

// 点击确定上传
$('button:contains("确定")').on('click', function () {
    // 4.1）调用插件方法，剪裁图片；剪裁之后得到一张canvas格式的图片
    var canvas = $image.cropper('getCroppedCanvas', {
        width: 100,
        height: 100
    });
    // 4.2) 把canvas图片转成base64格式，得到超长字符串
    var base64 = canvas.toDataURL();

    $.ajax({
        type: 'POST',
        url: '/my/user/avatar',
        data: { avatar : base64 },
        success: function (res) {
            layer.msg(res.message);
            console.log(res);
            if (res.status == 0) {
                
                window.parent.getUserInfo();
            }
        }
    })
});